<template>
  <div class="w-pages-wrapper">
    <div class="kanban-wrapper">
      <div class="header-title" style="margin-top:14px;display:inline-block">重点项目</div>
      <el-card style="padding:37px 24px">
        <el-row>
          <el-form :model="formInline" label-width="100px" class="demo-form-inline">
            <el-col :span="8">
              <el-form-item label="中心">
                <el-select
                  v-model="formInline.orgCode"
                  placeholder="请选择"
                  style="width:100%"
                  size="mini"
                  clearable
                  :filterable="true"
                  reserve-keyword
                  multiple
                  remote
                  collapse-tags
                  @visible-change="centerVisible"
                  @change="centerChange"
                  :remote-method="remoteCenterName"
                >
                  <el-option
                    v-for="item in centerOptions"
                    :key="item.orgCode"
                    :label="item.orgName"
                    :value="item.orgCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规模">
                <el-select
                  v-model="formInline.size"
                  placeholder="请选择"
                  style="width:100%"
                  size="mini"
                  clearable
                  :filterable="true"
                  reserve-keyword
                  multiple
                  remote
                  collapse-tags
                  @change="sizeChange"
                >
                  <el-option
                    v-for="item in sizeOptions"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="float:right">
              <el-button style="margin-right:20px" @click="reset">重置</el-button>
              <el-button type="primary" @click="queryProject">查询</el-button>
            </el-col>
          </el-form>
        </el-row>
      </el-card>
      <div style="display:flex;margin-top:24px">
        <div class="kanban-card">
          <div style="padding:19px 12px 0 12px">
            <div class="card-title title-green">意向实现中</div>
            <div style="margin:5px 0 16px">
              <p class="yincang" title="新一代核心业务">新一代核心业务</p>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">核心业务四代</span>
              <span class="paddingLeft">项目累计投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">基础服务研发中心</span>
              <span class="paddingLeft">累计行员投入(人月)：8532</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">全行重点</span>
              <span class="paddingLeft">累计人力外包投入(人月)：0</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">项目规模：特大型</span>
              <span class="paddingLeft">累计项目外包投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主研发负责人：杨xx</span>
              <span class="paddingLeft">立项时间：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主测试负责人</span>
              <span class="paddingLeft">故事最新上线：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主产品负责人：朱xx</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">业务项目经理：可xx</span>
            </div>
            <div class="fontColor margBottom">
              <span>已开始：20天</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="margBottom processw">
              <el-progress :percentage="30"></el-progress>
              <!-- <el-progress :percentage="isNaN(item.biz)?0:Number(item.biz)"></el-progress> -->
            </div>
          </div>
        </div>
        <div class="kanban-card">
          <div style="padding:19px 12px 0 12px">
            <div class="card-title title-green">意向实现中</div>
            <div style="margin:5px 0 16px">
              <p class="yincang" title="新一代核心业务">新一代核心业务</p>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">核心业务四代</span>
              <span class="paddingLeft">项目累计投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">基础服务研发中心</span>
              <span class="paddingLeft">累计行员投入(人月)：8532</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">全行重点</span>
              <span class="paddingLeft">累计人力外包投入(人月)：0</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">项目规模：特大型</span>
              <span class="paddingLeft">累计项目外包投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主研发负责人：杨xx</span>
              <span class="paddingLeft">立项时间：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主测试负责人</span>
              <span class="paddingLeft">故事最新上线：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主产品负责人：朱xx</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">业务项目经理：可xx</span>
            </div>
            <div class="fontColor margBottom">
              <span>已开始：20天</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="margBottom processw">
              <el-progress :percentage="30"></el-progress>
              <!-- <el-progress :percentage="isNaN(item.biz)?0:Number(item.biz)"></el-progress> -->
            </div>
          </div>
        </div>
        <div class="kanban-card">
          <div style="padding:19px 12px 0 12px">
            <div class="card-title title-green">意向实现中</div>
            <div style="margin:5px 0 16px">
              <p class="yincang" title="新一代核心业务">新一代核心业务</p>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">核心业务四代</span>
              <span class="paddingLeft">项目累计投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">基础服务研发中心</span>
              <span class="paddingLeft">累计行员投入(人月)：8532</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">全行重点</span>
              <span class="paddingLeft">累计人力外包投入(人月)：0</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">项目规模：特大型</span>
              <span class="paddingLeft">累计项目外包投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主研发负责人：杨xx</span>
              <span class="paddingLeft">立项时间：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主测试负责人</span>
              <span class="paddingLeft">故事最新上线：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主产品负责人：朱xx</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">业务项目经理：可xx</span>
            </div>
            <div class="fontColor margBottom">
              <span>已开始：20天</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="margBottom processw">
              <el-progress :percentage="30"></el-progress>
              <!-- <el-progress :percentage="isNaN(item.biz)?0:Number(item.biz)"></el-progress> -->
            </div>
          </div>
        </div>
        <div class="kanban-card">
          <div style="padding:19px 12px 0 12px">
            <div class="card-title title-green">意向实现中</div>
            <div style="margin:5px 0 16px">
              <p class="yincang" title="新一代核心业务">新一代核心业务</p>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">核心业务四代</span>
              <span class="paddingLeft">项目累计投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">基础服务研发中心</span>
              <span class="paddingLeft">累计行员投入(人月)：8532</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">全行重点</span>
              <span class="paddingLeft">累计人力外包投入(人月)：0</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">项目规模：特大型</span>
              <span class="paddingLeft">累计项目外包投入(人月)：1146.1</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主研发负责人：杨xx</span>
              <span class="paddingLeft">立项时间：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主测试负责人</span>
              <span class="paddingLeft">故事最新上线：2021-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">主产品负责人：朱xx</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="fontColor margBottom spaceBetween">
              <span class="span">业务项目经理：可xx</span>
            </div>
            <div class="fontColor margBottom">
              <span>已开始：20天</span>
              <span class="paddingLeft">故事最晚上线：2022-08-31</span>
            </div>
            <div class="margBottom processw">
              <el-progress :percentage="30"></el-progress>
              <!-- <el-progress :percentage="isNaN(item.biz)?0:Number(item.biz)"></el-progress> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.currentPage"
      :page-sizes="pageSizes"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align:right"
    ></el-pagination>
  </div>
</template>
<script>
import tools from "@/utils/tools";
export default {
  data() {
    return {
      formInline: {
        orgCode: [],
        size: [],
      },
      centerOptions: [
        { orgCode: "23", orgName: "个人应用研发中心" },
        { orgCode: "21", orgName: "互金应用研发中心" },
      ],
      centerOptionsCopy: [],
      allcenter: [],
      oldOrgCode: [[]],
      sizeOptions: [
        { key: "ALL_SELECT", label: "全选" },
        { key: "01", label: "大型" },
        { key: "02", label: "小型" },
      ],
      oldSize: [[]],
      pageSizes: [20, 40, 60, 80],
      total: 44,
      listQuery: {
        pageSize: 20,
        currentPage: 1,
      },
    };
  },
  mounted() {
    this.initSelect();
  },

  methods: {
    reset() {
      this.formInline.orgCode = [];
      this.formInline.size = [];
    },

    queryProject() {},
    initSelect() {
      //   query().then((res) => {
      //     this.centerOptions = res.data;
      this.centerOptions.unshift({
        orgCode: "ALL_SELECT",
        orgName: "全选",
      });
      this.allcenter = this.centerOptions.map((v) => {
        return v.orgCode;
      });
      this.formInline.orgCode = this.allcenter;
      this.centerOptionsCopy = tools.deepCopy(this.centerOptions);
      //   });
    },
    centerVisible(flag) {
      if (flag) {
        this.centerOptions = this.centerOptionsCopy;
      }
    },
    centerChange(val) {
      tools.allSelectFun(
        this,
        val,
        "oldOrgCode",
        "formInline",
        "centerOptions",
        "ALL_SELECT",
        "orgCode",
        "orgCode"
      );
    },
    sizeChange(val) {
      tools.allSelectFun(
        this,
        val,
        "oldSize",
        "formInline",
        "sizeOptions",
        "ALL_SELECT",
        "key",
        "size"
      );
    },
    remoteCenterName(query, label = "orgName") {
      let { selectOptions } = tools.filterMethod(
        query,
        label,
        this.centerOptions,
        this.centerOptionsCopy
      );
      this.centerOptions = selectOptions;
    },
    handleSizeChange(val) {
      this.listQuery.currentPage = val;
      //   this.tableListselect();
    },
    handleCurrentChange(val) {
      this.listQuery.pageSize = val;
      this.listQuery.currentPage = 1;
      //   this.tableListselect();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>